<!-- 主页 -->
<template>
  <div style="display: flex; overflow: hidden;">
    <div id="main" style="width: 500px; height: 500px; margin-top: 100px;"> </div>
    <div id="barmain" style="width: 500px; height: 500px; margin-top: 100px;"> </div>
    <div id="piemain" style="width: 800px; height: 700px;"> </div>
  </div>
  <div style="margin-top: -100px;">
    <el-input v-model="refwhe" style="width: 100px;" placeholder="查看天气" />
    <el-button type="success" @click="getweather()">搜索</el-button>
    <div v-if="whdata">
      {{ whdata.city }}&nbsp;{{ whdata.future[0].data }}&nbsp;{{ whdata.future[0].direct }}&nbsp;{{
        whdata.future[0].temperature }}&nbsp;{{ whdata.future[0].weather }}
    </div>
  </div>
</template>

<script setup lang='js'>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
import { gettodayw } from "@/api/getweather.js";
onMounted(() => {
  /* 柱形图 */
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'bar'
      },
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  option && myChart.setOption(option);

  /* 饼状图 */
  var barchartDom = document.getElementById('barmain');
  var barmyChart = echarts.init(barchartDom);
  var baroption;

  baroption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  baroption && barmyChart.setOption(baroption);
  /* 大饼图 */
  var piechartDom = document.getElementById('piemain');
  var piemyChart = echarts.init(piechartDom);
  var pieoption;

  pieoption = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
        ]
      }
    ]
  };

  pieoption && piemyChart.setOption(pieoption);
})
const refwhe = ref('')
const whdata = ref()
const getweather = async () => {
  const res = await gettodayw(refwhe.value)
  whdata.value = res.data.result
}
</script>

<style  scoped>
.kaifa {
  position: absolute;
  width: 40vw;
  height: 27vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: flex;
}

.kaifa div {
  flex: 1;
  overflow: hidden;
}
</style>
